<template>
  <div class="main-box">
    <content-title titleTop="Main business" title="主营业务"></content-title>
    <div class="main-content">
      <div
        class="main-flex"
        v-for="(item, index) in businessList"
        :key="index + 'buss'"
      >
        <business-item
          :title="item.title"
          :titleTips="item.titleTips"
          :price="item.price"
          :type="index == 0 ? 'left' : 'right'"
          :cotentList="item.cotentList"
          @onBuyClick="onBuyClick"
        ></business-item>
      </div>
    </div>
    <poster-box></poster-box>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import contentTitle from "../content-title/content-title.vue";
import businessItem from "./components/business-item/business-item.vue";
import posterBox from "./components/poster-box/poster-box.vue";
interface Events {
  (e: "onBuyClick"): void;
}
const emits = defineEmits<Events>();

const businessList = reactive([
  {
    title: "IT运维支持",
    titleTips: "活动：分享好友开通，免费获得一年服务，分得多，送得多！",
    price: 95,
    type: "left",
    cotentList: [
      {
        title: "24小时/7天 无忧运维",
        text: "全天候运维保障，确保您的业务稳定运行。",
      },
      {
        title: "高效数据转换",
        text: "全天候运维保障，确保您的业务稳定运行。",
      },
      {
        title: "专业在线咨询",
        text: "随时为您解答技术疑问，助您业务无忧。",
      },
      {
        title: "定制软件功能",
        text: "满足您的独特需求，让软件更贴合业务。",
      },
      {
        title: "贴心安装升级服务",
        text: "支持市面上95%软件系统、小程序、商城等安装、升级服务。",
      },
    ],
  },
  {
    title: "公司记账报税",
    titleTips: "活动：分享好友开通，免费获得一年服务，分得多，送得多！",
    price: 95,
    type: "right",
    cotentList: [
      {
        title: "专业团队",
        text: "汇聚行业精英，提供专业记账服务。",
      },
      {
        title: "法律合规",
        text: "全程遵循法律法规，为您的企业保驾护航。",
      },
      {
        title: "专业在线咨询",
        text: "随时为您解答财务疑问，助您业务无忧。",
      },
      {
        title: "时间节省",
        text: "让繁琐记账成为过去，专注发展未来。",
      },
      {
        title: "价格优势",
        text: "仅需200元每年起，让专业团队为您的财富开源节流。",
      },
    ],
  },
]);

const onBuyClick = () => {
  emits("onBuyClick");
};
</script>
<style lang="less">
@import "@/style/var.less";
@media (min-width: 750px) {
  .main-box {
    padding-top: 6px;
  }
  .main-content {
    margin-top: 50px;
    display: flex;
    .main-flex:last-child {
      margin-left: 32px;
    }
    .main-flex {
      flex: 1;
    }
  }

  .poster-box {
  }
}
@media (max-width: 750px) {
  .main-content {
    margin-top: 23px;
    padding: 0 8px;
    .main-flex:last-child {
      margin-top: 23px;
    }
  }
}
</style>
